;(function () {
	let billCahnge = {
		template: `<div class="clearfix bill-progress-container" :style="{marginTop: isNaN(marginTop) ? marginTop : marginTop + 'px'}">
			<div class="bill-progress clearfix">
				<div class="bill-amount--progress" ref="progress">
					<span>已收：{{ amountPayedTotal | formatNum }}元 / {{ amountReceiveTotal | formatNum }}元，{{ pgLt | formatNum }}%</span>
					<i v-if="amountPayedTotal" :style="{left: (pgLt < 96 ? pgLt : 96) + '%', marginLeft: pgLt == 0 ? '1px' : '0px'}"></i>
				</div>
				<div class="bill-progress-rate">
					<span :style="{width: pgLt + '%'}"></span>
				</div>
			</div>
			<div class="clearfix box-i-shadow border box-o-shadow" style="margin-top: 20px;">
				<div class="text-center dy-flex color-999">
				  <div class="dy-fx-3 line-height-45 ellipsis-1">账单编号</div>
				  <div class="dy-fx-4 line-height-45 ellipsis-1">租约期</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">收款截止日</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">应收金额</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">实收日期</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">实收金额</div>
				  <div class="dy-fx-1 line-height-45 ellipsis-1">状态</div>
				</div>
				<div class="clearfix border-t dy-flex text-center" v-for="item in billData">
				  <div class="dy-fx-3 line-height-45 ellipsis-1">
						<a v-if="skipTo" @click="billNoToBillDetail(item)">{{ item.no || '--' }}</a>
						<span v-if="!skipTo">{{ item.no || '--' }}</span>
					</div>
				  <div class="dy-fx-4 line-height-45 ellipsis-1">{{ item.beginDate | formatDate }} 至 {{ item.endDate | formatDate }}</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">{{ item.paymentDeadline | formatDate }}</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">{{ item.amountReceive | formatNum }}</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">{{ item.paymentDate | formatDate }}</div>
				  <div class="dy-fx-2 line-height-45 ellipsis-1">{{ item.amountPayed | formatNum }}</div>
				  <div class="dy-fx-1 line-height-45 ellipsis-1">{{ item.paymentState | billState }}</div>
				</div>
			</div>	
		</div>`,
		props: {
			marginTop: {
				type: [String, Number],
				default: '20px'
			},
			skipTo: {
				type: Boolean,
				default: true
			},			
			url: {
				type: String,
				default: 'contracts/bills'
			},
			params: {
				type: Object,
				default: function () {
					return {}
				}
			}
		},
		data () {
			return {
				pgLt: 0,
				amountPayedTotal: 0,
				amountReceiveTotal: 0,
				contractId: hlUrlUtil.GetQueryString('id'),
				billData: []
			}
		},		
		filters: {
			formatDate: function(time) {
			  if (time === undefined) return '--'
			  return hlDateUtil.formatUTCDate(time,'yyyy-MM-dd')
			},
			formatNum:function(item){
			  return hlNumberUtil.formatNum(item)
			},
			billState: function(str) {
			  return hlCodeConvert.billPaymentState(str)
			},
		},
		methods: {
			billNoToBillDetail (item) {
				if (!this.skipTo) return;
				hlUrlUtil.goTo('billDetail',{'page': 'billList', id: item.id, aid: this.contractId, ddtab:true})
			},
			//获取账单信息
			billInfoData () {
				hlhttp.get({
					url: this.url,
					data: this.params,
					success: (data) => {
						data.map(item => {
							this.amountPayedTotal += Number(item.amountPayed)
							this.amountReceiveTotal += Number(item.amountReceive)
						})
						this.pgLt = this.amountPayedTotal/this.amountReceiveTotal*100;
						
						setTimeout(() => {
							this.$refs.progress.style.left = this.pgLt+'%';
							let pw = hlArrayUtil.getDomWidthOrHeight('width', this.$refs.progress);
							this.$refs.progress.style.marginLeft = -pw + (pw-pw*this.pgLt/100-(this.pgLt == 100 ? 0 : this.pgLt == 0 ? 0 : 5)) + 'px';
						}, 50)
						
						this.billData = data;
					}
				})
			}
		},
		mounted () {
			this.billInfoData()
		}
	}
	Vue.component('bill-change', billCahnge)
} ())